<template>
  <div class="q-pa-md" style="max-width: 350px">
    <t-toolbar class="bg-primary text-white shadow-2">
      <t-toolbar-title>Contacts</t-toolbar-title>
    </t-toolbar>

    <t-list bordered>
      <t-item
        v-for="contact in contacts"
        :key="contact.id"
        class="q-my-sm"
        clickable
        v-ripple
      >
        <t-item-section avatar>
          <t-avatar color="primary" text-color="white">
            {{ contact.letter }}
          </t-avatar>
        </t-item-section>

        <t-item-section>
          <t-item-label>{{ contact.name }}</t-item-label>
          <t-item-label caption lines="1">{{ contact.email }}</t-item-label>
        </t-item-section>

        <t-item-section side>
          <t-icon name="chat_bubble" color="green" />
        </t-item-section>
      </t-item>

      <t-separator />
      <t-item-label header>Offline</t-item-label>

      <t-item
        v-for="contact in offline"
        :key="contact.id"
        class="q-mb-sm"
        clickable
        v-ripple
      >
        <t-item-section avatar>
          <t-avatar>
            <img :src="`https://cdn.quasar.dev/img/${contact.avatar}`" />
          </t-avatar>
        </t-item-section>

        <t-item-section>
          <t-item-label>{{ contact.name }}</t-item-label>
          <t-item-label caption lines="1">{{ contact.email }}</t-item-label>
        </t-item-section>

        <t-item-section side>
          <t-icon name="chat_bubble" color="grey" />
        </t-item-section>
      </t-item>
    </t-list>
  </div>
</template>

<script>
  const contacts = [
    {
      id: 1,
      name: 'Ruddy Jedrzej',
      email: 'rjedrzej0@discuz.net',
      letter: 'R',
    },
    {
      id: 2,
      name: 'Mallorie Alessandrini',
      email: 'malessandrini1@marketwatch.com',
      letter: 'M',
    },
    {
      id: 3,
      name: 'Elisabetta Wicklen',
      email: 'ewicklen2@microsoft.com',
      letter: 'E',
    },
    {
      id: 4,
      name: 'Seka Fawdrey',
      email: 'sfawdrey3@wired.com',
      letter: 'S',
    },
  ];

  const offline = [
    {
      id: 5,
      name: 'Brunhilde Panswick',
      email: 'bpanswick4@csmonitor.com',
      avatar: 'avatar2.jpg',
    },
    {
      id: 6,
      name: 'Winfield Stapforth',
      email: 'wstapforth5@pcworld.com',
      avatar: 'avatar6.jpg',
    },
  ];

  export default {
    setup() {
      return {
        contacts,
        offline,
      };
    },
  };
</script>
